<template>
  <view class="headBox" :style="'background-color:'+bgcolor+';'">
    <view class="nav"  v-if="isShow">
      <text class="iconfont icon-zuojiantou" @tap="handleBack"></text>
      <text style="color: rgba(256,256,256,0.1);font-size:16px;">|</text>
      <text class="iconfont icon-shouye" @tap="handleHome"></text>
    </view>
    <text class="head-title showSigle" :style="'color:'+titlecolor+';'">{{title}}</text>
  </view>
</template>

<script>
  export default {
    name:"common-head",
    data() {
      return {
      };
    },
    // title:控制标题显示，isShow:控制左侧返回按钮是否显示
    props:['title','isShow','bgcolor','titlecolor'],
    methods:{
      // 返回上一级
      handleBack(){
        uni.navigateBack();
        console.log('返回上一级');
      },
      // 返回主页面
      handleHome(){
        console.log('返回主页面')
        uni.navigateTo({
          url:"../../pages/index/index"
        })
      }
    }
  }
</script>

<style scoped>
  .headBox{
    position: relative;
    width: 100%;
    height: 75px;
    font-size: 16px;
  }
  .headBox .nav{
    position: absolute;
    top: 25px;
    left: 8px;
    display: flex;
    justify-content: space-evenly;
    color: #fff;
    width: 82px;
    height: 31px;
    border-radius: 14px;
    background-color: rgba(0,0,0,0.5);
    line-height: 31px;
  }
  .headBox .head-title{
    position: absolute;
    width: calc(100vw - 180px);
    top: 31px;
    left: 50%;
    transform: translateX(-50%);
    color: #FFFFFF;
    text-align: center;
  }
  
  /* 单行显示 */
  .showSigle{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
</style>
